<!DOCTYPE html>
<html>
<head>
  <title>登录</title>
  <style type="text/css">
    html {
      background: url("/img/background.jpg") no-repeat center center fixed;
      background-size: cover;
    }
    body {
      overflow: hidden;
      text-align: center;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    h1 {
      text-align: center;
      margin-top: 50px;
      color: white;
    }
    .box {
      width: 320px;
      height: 200px;
      text-align: center;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-160px;
      margin-top:-150px;
      padding-top:30px;
      padding-bottom:20px;
      border-radius:  5px;
      box-shadow:#444444 2px 2px 10px;
      background-color: rgba(242, 242, 242, 0.6);
      color:black;
    }
    .editor {
      height: 40px;
      width: 240px;
      border:1px #008000 solid;
      border-radius:  5px;
      font-size: 15px;
      background-color: #fbffda;
    }
    .button:hover {
      background-color: #0c6200;
    }
    .button {
      border-style: none;
      padding: 10px 105px;
      line-height: 24px;
      color: #fff;
      font: 16px "Microsoft YaHei", Verdana, Geneva, sans-serif;
      cursor: pointer;
      border-radius: 4px;
      background-color: #008000;
    }
    .hint {
      font-size: 10px;
      color: #ff0000;
    }
    #place_holder{
      height: 10px;
    }
  </style>
</head>
<h1>项目任务管理系统</h1>
<div class="box">
  <form>
    <input class="editor" id="name" type="text" placeholder="名字"><br>
    <label class="hint" id="name_hint"></label><br><br>
    <input class="editor" id="password" type="password" placeholder="密码"><br>
    <label class="hint" id="password_hint"></label><br><br>
    <div id="place_holder"></div>
    <label class="button" id="submit" >登录</label>
  </form>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script>
  $(document).ready(function(){
    $("#submit").click(function(){
      var name = $("#name").val();
      var password = $("#password").val();
      if (name == "") {
        $("#name_hint").text("请填写名字");
        return;
      }
      if (password == "") {
        $("#password_hint").text("请填写密码");
        return;
      }
      $("#password_hint").text("正在登陆...");
      var request = {"name":name, "password":password};
      $("#submit").css("pointer-events", "none");//禁用按钮点击，防止重复提交
      $.ajax({
        type:"POST",
        contentType:"application/json",
        url:"/employee/login.do",
        data: JSON.stringify(request),
        success:function(data){
          var obj = eval('(' + data + ')');
          if(obj.status == "success") {
            $("#password_hint").text("登陆成功");
            $.cookie('username', name);
            $.cookie('id', obj.data);
            self.location='/project/main.do';
          } else {
            $("#password_hint").text("账号与密码不匹配");
          }
          $("#submit").css("pointer-events", "");
        },
        error:function(XMLHttpRequest, textStatus, errorThrown) {
          $("#password_hint").text(XMLHttpRequest.status + textStatus);
          $("#submit").css("pointer-events", "");
        }
      });
    })
  });
</script>
</body>
</html>
